<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极图</title>
    <script>
        window.onload=function(){
            var gap_step = 10;
            var index_width = 42;
            var canvas = document.getElementById('tj')
            var context = canvas.getContext('2d');
            var tj_r = 100;
            var index_tj = 0;
            canvas.style.zIndex = index_tj;
            // 大圆
            context.beginPath()
            context.arc(tj_r*2+1, tj_r*2+1, tj_r, Math.PI / 180 * 90, Math.PI / 180 * 270);
            context.closePath();
            context.fillStyle='black';
            context.strokeStyle='black';
            context.lineWidth=2;
            context.stroke();
            context.fill()

            context.beginPath()
            context.arc(tj_r*2+1, tj_r*2+1, tj_r, Math.PI /180* 270, Math.PI /180* 90);
            context.closePath();
            context.fillStyle='white';
            context.strokeStyle='black';
            context.lineWidth=2;
            context.stroke();
            context.fill()

            //中圆
            context.beginPath()
            context.arc(tj_r*2+1, tj_r/2*3+1, tj_r/2, Math.PI / 180 * 0, Math.PI / 180 * 360);
            context.closePath()
            context.fillStyle='black'
            context.fill()

            context.beginPath()
            context.arc(tj_r*2+1, tj_r/2*5+1, tj_r/2, Math.PI / 180 * 0, Math.PI / 180 * 360);
            context.closePath()
            context.fillStyle='white'
            context.fill()
            
            // //小圆
            context.beginPath()
            context.arc(tj_r*2+1,tj_r/2*3+1,tj_r/10,Math.PI / 180 * 0, Math.PI / 180 * 360)
            context.closePath()
            context.fillStyle='white'
            context.fill()
            
            context.beginPath()
            context.arc(tj_r*2+1,tj_r/2*5,tj_r/10,Math.PI / 180 * 0, Math.PI / 180 * 360)
            context.closePath()
            context.fillStyle='black'
            context.fill()


            var canvas_xtbg = document.getElementById('xtbg')
            var context_xtbg = canvas_xtbg.getContext('2d');
            var index_xtbg = 1;
            canvas_xtbg.style.zIndex = index_xtbg;
            var xtbg_r=tj_r + index_width * (index_xtbg-1);
            var arr=["212","221","222","122","121","112","111","211",]   
            var arr_txt=["坎","艮","坤","震","离","兑","乾","巽",]         
            for(var i=0;i<8;i++){             
                var theta=i*Math.PI/4;             
                var x=xtbg_r*Math.cos(theta)+200;             
                var y=xtbg_r*Math.sin(theta)+200;              
                context_xtbg.save();             
                context_xtbg.translate(x,y);             
                context_xtbg.rotate(theta+Math.PI/2);            
                drawGua(context_xtbg,arr[i],arr_txt[i])             
                context_xtbg.restore();    
                
            }   
            context_xtbg.fill(); 
            drawBorder(context_xtbg,tj_r*2+1, tj_r*2+1, xtbg_r+index_width+gap_step,'rgba(255, 255, 255, 0)','1');

            var canvas_htbg = document.getElementById('htbg')
            var context_htbg = canvas_htbg.getContext('2d');
            var index_htbg = 2;
            canvas_htbg.style.zIndex = index_htbg;
            var htbg_r=tj_r + gap_step + index_width * (index_htbg-1);
            var arr=["112","111","212","221","122","211","121","222",]   
            var arr_txt=["兑","乾","坎","艮","震","巽","离","坤",]      
            for(var i=0;i<8;i++){             
                var theta=i*Math.PI/4;             
                var x=htbg_r*Math.cos(theta)+200;             
                var y=htbg_r*Math.sin(theta)+200;              
                context_htbg.save();             
                context_htbg.translate(x,y);             
                context_htbg.rotate(theta+Math.PI/2);            
                drawGua(context_htbg,arr[i],arr_txt[i])             
                context_htbg.restore();    
            }    
            context_htbg.fill();
             drawBorder(context_htbg,tj_r*2+1, tj_r*2+1, htbg_r+48,'rgba(255, 255, 255, 0)','1');
        }
        function drawBorder(ctx,x,y,r,strokeStyle,lineWidth){
            ctx.beginPath()
            ctx.arc(x,y,r, Math.PI / 180 * 0, Math.PI / 180 * 360);
            ctx.closePath();
            ctx.fillStyle='rgba(255, 255, 255, 0)';
            ctx.strokeStyle='black';
            ctx.lineWidth=1;
            ctx.stroke();
            ctx.fill()
        }
        function drawGua(ctx,code,txt){     
            var arr=code.split("");     
            const ratio=4;          
            for(var i=0;i<arr.length;i++){         
                var letter=arr[i];          
                if(letter=="1"){             
                    ctx.fillStyle="rgb(255,215,0)";             
                    ctx.fillRect(-4*ratio,-16-i*3*ratio,8*ratio,2*ratio);         
                }else{             
                    ctx.fillStyle="rgb(255,215,0)";             
                    ctx.fillRect(-4*ratio,-16-i*3*ratio,3*ratio,2*ratio);              
                    ctx.fillStyle="rgb(255,215,0)";             
                    ctx.fillRect(1*ratio,-16-i*3*ratio,3*ratio,2*ratio);         
                }     
            } 
            writeText(ctx,0+30,0-ratio/2*6,txt,"20px consolas","rgb(255,215,0)");   
        }
        /*----------------
        函数:书写文字 
        ctx:绘图上下文 
        x:横坐标 
        y:纵坐标 
        text:文字 
        font:字体 
        color:颜色 
        -----------------*/ 
        function writeText(ctx,x,y,text,font,color){     
            ctx.save();     
            ctx.textBaseline="bottom";     
            ctx.textAlign="center";     
            ctx.font = font;     
            ctx.fillStyle=color;     
            ctx.fillText(text,x,y);     
            ctx.restore(); 
        }
    </script>
    <style>
        #tj{
            animation: move 5s linear infinite;
            position: absolute;
        }
        @keyframes move {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        #xtbg{
            animation: move 10s linear infinite;
            position: absolute;
        }
        #htbg{
            animation: move 15s linear infinite;
            position: absolute;
        }
    </style>

</head>
<body>
    <canvas id="tj" height="402" width="402" id="canvas"></canvas>
    <canvas id="xtbg" height="402" width="402" id="canvas"></canvas>
    <canvas id="htbg" height="402" width="402" id="canvas"></canvas>
</body>
</html>
